<template>
  <div class="mine-container">
    <myNavbar title="地图选点"></myNavbar>
    <div style="align-items: center">
      <eeui-amap style="width:750px;height:450px" @zoomchange="zoomchange" @dragend="dragend"
                 :sdkKey="{ios:'9ba669a55d7614c4ef42c8d54508c57a','android':'1535c84038c3695a45811a2a3c108d6a'}"
                 :zoom="16" :center="center" geolocation="true" myLocationEnabled="true" showMyLocation="true">
        <!-- <eeui-amap-marker :position="center" ></eeui-amap-marker> -->
      </eeui-amap>
      <!-- <icon class="icon amapcover" content="ios-pin" ref="amapcover"></icon> -->
      <image src="http://rzico.oss-cn-shenzhen.aliyuncs.com/img/greenDingwei.png" class="icon amapcover"
             ref="amapcover"></image>
    </div>
    <div class="search_input_content" @click="searchClick">
      <div class="search_input">
        <icon class="icon search_icon" content="tb-search" fontSize="38"></icon>
        <input class="search_input_inner" placeholder="请输入地点" :value="addressName" v-model="addressName"/>
      </div>
      <div class="search_btn" @click="searchSubmit">
        <text class="selectAreabtn-serch">搜索</text>
      </div>
    </div>
    <div class="selectArea-contain-list">
      <scroll-view ref="reflectName" class="reflectName">
        <div v-if="addressList.length>0">
          <div v-for="(item,index) in addressList" :key="index" class="selectArea-contain-cell"
               @click="addressClick(item)">
            <icon class="icon" content="ios-pin"></icon>
            <div class="selectArea-contain-div">
              <text class="selectArea-contain-name">{{ item.name }}</text>
              <text class="selectArea-contain-address">{{ item.address }}</text>
            </div>
            <icon class='checked' content="md-checkmark" v-if="item.checked"></icon>
          </div>
        </div>
        <div v-else>
          <noData noDataText="未知区域，请重新输入并查询"></noData>
        </div>
      </scroll-view>
    </div>
    <div class="btn selectAreabtn botton_Bg_Color" @click="submit">
      <text class="selectAreabtn-text">确认选点</text>
    </div>
  </div>
</template>
<script>
import {
  save,
  update,
  del
} from "../../../api/address";

import {
  poiLocation, poiQuery
} from "../../../api/amap";

import gps from "../../../utils/gps";

import myNavbar from "../../../components/myNavbar/myNavbar";
import noData from "../../../components/noData/noData";

const amap = app.requireModule("eeui/amap");
const eeui = app.requireModule('eeui');
const geolocation = app.requireModule("eeui/geolocation");
const animation = weex.requireModule('animation')

export default {
  name: "address",
  components: {
    myNavbar,
    noData
  },
  data() {
    return {
      addressName: '',
      center: [],
      lng: 118.1,
      lat: 24.46,
      point: {
        position: [],
        title: "This is a marker",
      },
      addressList: [],
      selectAddress: "",
      addressType: false,
    };
  },
  created() {

  },

  mounted() {
    // 在实例创建完成后被立即调用
    let _this = this;
    geolocation.get((res) => {
      _this.lng = res.longitude;
      _this.lat = res.latitude;
      let center = []

        if (res!=null && res.latitude!=null && res.longitude!=null) {
            let postion = gps.gcj_encrypt(res.latitude,res.longitude);
            _this.lat = postion.lat;
            _this.lng = postion.lng

        } else {
            _this.lat = 24.46;
            _this.lng = 118.1;
        }
      center[0] = _this.lng
      center[1] = _this.lat
      this.center = center
      _this.getBuilding();
    });
  },

  methods: {
    getBuilding() {
      console.log('我执行了刷新列表')
      let _this = this;
      let data = {
        lng: this.lng,
        lat: this.lat
      };
      // console.info("拖动地图发送的请求data--" + JSON.stringify(data));
      poiLocation(data)
          .then((res) => {
            // console.info("拖动地图的数据res--" + JSON.stringify(res));
            let addressList = [];
            if (res.type == "success") {
              if (res.data.pois.length > 0) {
                // console.log("res.data.pois.length--" + res.data.pois.length);
                res.data.pois.map((item) => {
                  item.checked = false
                })
                this.addressList = res.data.pois;
              } else {
                this.addressList = []
              }
            }
          })
          .catch((error) => {
            console.log(error);
          });
    },

    getAddress(callback) {
      let _this = this;
      let data = {lat: this.lat, lng: this.lng, keyword: this.addressName};
      poiQuery(data)
          .then((res) => {
            // console.log("添加地址的res--" + JSON.stringify(res));
            let addressList = [];
            if (res.type == "success") {
              if (res.data.pois.length > 0) {
                // console.log("res.data.pois.length--" + res.data.pois.length);
                this.addressList = res.data.pois;
              } else {
                this.addressList = []
              }
              if (callback) {
                callback()
              }
            }
          })
          .catch((error) => {
            console.log(error);
          });
    },

    zoomchange(e) {
      // console.info("用户缩放地图时触发该事件" + JSON.stringify(e));
    },

    dragend(e) {
      console.info("用户拖动地图时触发该事件" + JSON.stringify(e.center));
      let _this = this;
      this.lng = e.center.longitude;
      this.lat = e.center.latitude;
      if (this.addressType == false){
        _this.getBuilding();
      }
      this.locationAnimation()
    },

    submit() {
      if (this.isNull(this.selectAddress)) {
        eeui.toast({
          message: "请点击选择地址",
        });
      } else {
        eeui.setCaches('address', this.selectAddress, 0)
        eeui.closePage({pageName: "selectArea"})
      }

    },

    addressClick(data) {
      var _this = this
      let center = []
      center[0] = data.location.split(",")[0]
      center[1] = data.location.split(",")[1]
      this.center = center
      if (this.addressList.length > 0) {
        this.addressList.map((item) => {
          if (item.id == data.id) {
            item.checked = true
            _this.selectAddress = item
            _this.addressType = true
            setTimeout(function (){
              _this.addressType = false
            },3000)
            _this.locationAnimation()
          } else {
            item.checked = false
          }
        })
      }
    },

    searchSubmit() {
      let _this = this
      if (this.isNull(this.addressName)) {
        eeui.toast({
          message: "请输入搜索地点",
        });
      } else {
        this.getAddress(() => {
          _this.$refs.reflectName.scrollToPosition(0);
        })

      }
    },

    //执行定位的动画
    locationAnimation() {
      let _this = this
      animation.transition(_this.$refs.amapcover, {
        styles: {
          transform: 'translate(0px, -30px)',
        },
        duration: 400, //ms
        timingFunction: 'ease-out',
        needLayout: false,
        delay: 0 //ms
      })
      setTimeout(() => {
        animation.transition(_this.$refs.amapcover, {
          styles: {
            transform: 'translate(0px, 30px)',
          },
          duration: 400, //ms
          timingFunction: 'ease-out',
          needLayout: false,
          delay: 0 //ms
        })
      }, 400);
    }
  },
};
</script>
<style lang="css" src="../../../style/wx.css" />
<style scoped>
.icon {
  width: 40px;
  height: 40px;
}

.mine-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: rgba(248, 248, 248, 0.8);
}

.top {
  /* height:730px */
}

.amapcover {
  position: absolute;
  width: 60px;
  height: 60px;
  left: 345px;
  top: 160px;
  animation: myfirst 0.5s 3;
}

@keyframes myfirst {
  0% {
    transform: translate(0px, 0px);
  }
  50% {
    transform: translate(0px, -10px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

.selectArea-contain {
  margin-bottom: 120px;
  border-style: solid;
  border-width: 1px;
  border-color: #000;
}

.selectArea-contain-top {
  /* flex: 1; */
}

.selectArea-contain-list {
  flex: 1;
  width: 750px;
  justify-content: center;
  padding: 0 20px;
}

.reflectName {
  flex: 1;
}

.selectArea-contain-cell {
  width: 700px;
  height: 100px;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: rgb(216, 216, 216);
  /* display: flex; */
  flex-direction: row;
  align-items: center;
  padding-left: 20px;
}

.selectArea-contain-div {
  flex: 1;
}

.selectArea-contain-name {
  font-size: 30px;
  text-overflow: ellipsis;
  lines: 1;
}

.selectArea-contain-address {
  margin-top: 10px;
  font-size: 24px;
  text-overflow: ellipsis;
  lines: 1;
}

.checked {
  width: 60px;
  height: 60px;
  color: #ff0000;
  font-size: 60px;
}


.search_input_content {
  width: 710px;
  height: 70px;
  /* border: 1px solid rgba(212, 215, 220, 1); */
  opacity: 0.95;
  border-radius: 50px;
  display: flex;
  margin-left: 20px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  overflow: hidden;
  margin-top: 20px;
  margin-bottom: 20px;
}

.search_icon {
  /* flex-basis: 50px; */
}

.search_input {
  flex: 1;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-left: 20px;
}

.search_input_inner {
  flex: 1;
  margin-left: 10px;
  height: 60px;
}

.search_btn {
  width: 120px;
  height: 70px;
  align-items: center;
  justify-content: center;
  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: rgb(194, 194, 194);
}

/*.search_btn:active{*/
/*    width: 120px;*/
/*    height:70px;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    border-left-style:solid;*/
/*    border-left-width:2px;*/
/*    border-left-color:rgb(194, 194, 194);*/
/*    background-color: gray;*/
/*}*/

.selectAreabtn {
  bottom: 0px;
  align-items: center;
  justify-content: center;
  margin: 10px 20px;
  border-radius: 100px;
  width: 710px;
  height: 80px;
  /* background-color: #427cff; */
}

.selectAreabtn:active {
  bottom: 0px;
  align-items: center;
  justify-content: center;
  margin: 10px 20px;
  border-radius: 16px;
  width: 710px;
  height: 80px;
  background-color: #fff;
}

.selectAreabtn-text {
  font-size: 32px;
  letter-spacing: 5px;
  color: white;
}


.selectAreabtn-serch {
  font-size: 32px;
  letter-spacing: 5px;
  color: black;
}

</style>
